<template>
	<div style="flex: 1">
		<div class="headnav"
			><router-link v-for="(item, index) in list" :key="index" class="div" :to="item.url" :class="{ active: index === focusedItem }" @click="focusedItem = index">{{ item.name[$i18n.locale] }}</router-link></div
		>
		<el-icon class="appheadnav" @click="drawer = true"><Expand /></el-icon>
		<el-drawer :style="{ background: data.web.background, color: data.web.color }" size="150" :append-to-body="true" v-model="drawer" direction="ltr" :with-header="false">
			<div class="applist">
				<router-link v-for="(item, index) in list" :key="index" class="div" :to="item.url" :class="{ active: index === focusedItem }" @click=";(drawer = false), (focusedItem = index)">{{ item.name[$i18n.locale] }}</router-link>
			</div>
		</el-drawer>
	</div>
</template>

<script>
	import { dataRequest as api } from '@/api/api'
	export default {
		props: ['data'],
		data() {
			return {
				drawer: false,
				focusedItem: null,
				domain: window.location.hostname.toLowerCase().replace(/^www\./, ''),
				list: [],
			}
		},
		methods: {
			async getdata() {
				try {
					let array = await api('Query', 'navigations', { domain: this.domain, perPage: 6, page: 1, offset: 'ASC' })
					if (array.code == 200) {
						this.list = array.data
					}
				} catch (error) {}
			},
		},
		mounted() {
			this.getdata()
		},
	}
</script>

<style scoped>
	.headnav {
		display: flex;
		flex-direction: row;
	}
	.div {
		padding: 10px 20px;
		font-weight: bold;
	}
	.active {
		color: #52e29f;
	}
	.applist {
		display: flex;
		flex-direction: column;
	}
	.appheadnav {
		font-size: 25px;
	}
</style>
<!-- {name:{en:''cn:""},url:''} -->
